import React from "react";
import { User } from "screens/project-list/search-panel";
import { Table, TableProps } from "antd";
import dayjs from "dayjs";
import { Link } from "react-router-dom";
import { Project } from "types/Project";
import { Pin } from "components/pin";
import { useEditProjects } from "utils/use-edit-projects";

// 透传table属性到list
interface ListProps extends TableProps<Project> {
  // tableprops里面有list，叫做dataSource
  // list: Project[];
  users: User[];
  refresh?: ()=>void;
}
// 传入tableProps
export const List = ({ users, ...props }: ListProps) => {
  const {mutate} = useEditProjects()
  const pinProject = (id: number) => (pin: boolean) => mutate({id, pin}).then(props.refresh)
  return (
    <Table
      pagination={false}
      columns={[
        {
          title: <Pin checked={true} disabled={true}/>,
          render(value, project) {
            return <Pin checked={project.pin} onCheckedChange={
              pinProject(project.id)
            }/>
          }
        },
        {
          title: "名称",
          sorter: (a, b) => a.name.localeCompare(b.name),
          render(value, project) {
            return <Link to={project.id + ""}>{project.name}</Link>;
          },
        },
        {
          title: "部门",
          dataIndex: "organization",
        },
        {
          title: "负责人",
          render(value, project) {
            return (
              <span>
                {users.find((user) => user.id === project.personId)?.name ||
                  "未知"}
              </span>
            );
          },
        },
        {
          title: "创建时间",
          render(value, project) {
            return (
              <span>
                {project.created
                  ? dayjs(project.created).format("YYYY-mm-DD")
                  : "未知"}
              </span>
            );
          },
        },
      ]}
      // dataSource={list}
      // 传入tableProps
      {...props}
    />
  );
};
